cc-pocket · mobile ui 2.0 · supporting surfaces · direction

Supporting Surfaces Direction v1

Three first-hop destinations opened from the Projects header: Fleet, Review Center and Settings. One system for all three — a standard back, a large title, a factual summary line, then low-container rows. Six frames show the highest-risk state of each surface rather than its happy path. Entry Flow Master v2 is unchanged; this board decides how its header's destinations look.

6 frames
402 × 874 · 1:1
3 destinations
fixtures, not claims
no protocol change
nothing removed
S

One system for all three

A first-hop destination is recognisable before its content loads.
First-hop header
Computers
4 computers · 2 online

Standard back at the gutter, large title, one factual summary line. The summary counts what the backend reported and nothing else.

Entity row
Panda · MacBook ProOnline
/Users/alex/code/cc-pocket
2

Shape, written status, name, then real activity. The badge is semantic and counts pending approvals only. The whole row is the target.

Status grammar
Online
Reconnecting
Offline
No state reported

Circle, diamond, square, ring — the same four marks the locked direction already uses. Each is always beside its word.

Tab control · category row
Inbox Sent Contacts
General
Dark · Default size · Notifications on

Three tabs as bordered chips that wrap instead of clipping. Category rows carry a summary drawn from live settings — never a secret, never a guess.

P1

Fleet · Attention

Mixed status is the normal case, so it is the frame that decides the design.
01 · Fleet · mixed status · attention strip
9:41

Computers

4 computers · 2 online
1 waiting for approval 2m
Run the release script
Bash · ./scripts/release.sh --tag v2.0.0
Panda · MacBook Pro
Review request
Computers
Panda · MacBook Pro Online Current
macOS 15.3
/Users/alex/code/cc-pocket
2
studio-mini.local Reconnecting
macOS 15.1
/Users/alex/code/relay-server
mini-builder Offline
Ubuntu 24.04
Last seen 3h ago
4c8e…a17 Offline
Last seen yesterday
+ Pair a new computer
Notes
The attention strip is optional and appears only while something is pending. It carries the five real fields — computer, tool, title, preview, elapsed — and hands off to the existing request detail rather than deciding anything itself.

Rows state OS because this brief lists it as a Fleet field. The entry-flow Computers row still does not: that surface's brief withholds it. Same component family, different declared field set.

Last seen appears only where the computer is not online — for an online machine the activity path is the more useful fact and the timestamp is noise.

Tapping any row switches computer, which is the same action the header doorway performs. Nothing invents latency, health or battery.
02 · Attention · pending + finished
9:41

Attention

2 waiting · across 1 computer
Waiting for you
Run the release script 2m
Bash · ./scripts/release.sh --tag v2.0.0
Panda · MacBook Pro
Allow Deny Open
Write to a file outside the workdir 11m
Write · /Users/alex/.config/ccpocket/config.toml
Panda · MacBook Pro
Allow Deny Open
Recently finished
Update the changelog 4m ago
Run the test suite 22m ago
Bump the protocol version 1h ago
Finished items record what the backend reported: the title, whether it succeeded, and when.
Notes
Pending first, finished second, and the boundary between them is a written section label rather than a colour change.

Allow and Deny keep their existing semantics exactly. Open hands the request to the secure approval sheet, which stays the only place a full request is examined — this list shows the preview, not the whole payload.

Success and failure on finished items are the backend's own result. Nothing here infers an outcome from elapsed time or from the absence of a follow-up.

Empty, loading and disconnected specimens are in section X; each replaces the list region only and leaves the header standing.
Attention · conditional list regions
Nothing waiting
No computer is asking for approval. Recently finished work stays below.
Empty · pending list is genuinely empty
Loading · request-shaped, never a spinner
Not connected
Approvals cannot be answered while disconnected. Anything already waiting is still waiting on the computer.
Retry
Disconnected · buttons absent, not disabled-looking
No computers yet
Pair a computer to see it here.
Fleet empty · the pair row below is the way out
Fleet · field to copy
name → row title, verbatim, wraps on characters
os → quiet second line, verbatim
state → mark + written word, one of four
activity | path → monospace, only when present
lastSeen → only when not online
pendingCount → semantic badge, hidden at zero
isCurrent → outlined Current chip
P2

Review Center

The risk here is not layout. It is printing a status the protocol did not send.
03 · Inbox · pending first
9:41

Review Center

2 waiting for your response
Inbox Sent Contacts
Needs a response
Mei In progress
Check the migration plan before I ship it
Opened 18m ago
devops-bot Delivered
Approve the staging rollout window
Opened 2h ago
Everything else
Priya Responded
Sanity-check the release notes
Mei Closed
Review the pairing copy
Each row shows the state the protocol supplied. A review that has not been delivered says so, however long ago it was created.
Notes
Three tabs, unchanged. They are 44 pt chips that wrap to a second line at large type instead of compressing their labels.

Pending rows lead and carry the diamond; resolved rows sit under a written section label. The row opens the existing received-review detail — no state is changed from the list.

Sender names and review titles are user content and stay literal. Only the status word, the section labels and the summary line are localised grammar.
04 · Sent · exact status · light
9:41

Review Center

4 sent · 1 not delivered yet
Inbox Sent Contacts
Mei Queued
Look over the entry-flow copy
Created 3m ago · not delivered yet
Priya Delivered
Confirm the approval wording
Created 1h ago
devops-bot In progress
Sign off on the relay upgrade
Created yesterday
Mei Responded
Check the pairing fallback
Queued is not a delay
It means the relay has not yet handed the review over. Age is shown next to it, but age never promotes it to Delivered.
Notes
The light proof shares the dark frame's geometry exactly. Amber becomes #8A5A08 and green #1F7A4D so both carry their meaning against paper.

Five states, five words: Queued, Delivered, In progress, Responded, Closed. Each is printed as supplied — there is no sixth word and no derived one.

The summary line counts what is undelivered rather than describing the queue's health, and Invite and Join stay on the Contacts tab untouched.
Review · five supplied states, and the four honest failures
State
What it is allowed to mean
Queued
Accepted locally, not yet handed over by the relay. Never upgraded by the passage of time.
Delivered
The recipient has it. It says nothing about whether they have looked.
In progress
Opened and being worked. Reported by the protocol, not inferred from a read receipt.
Responded
A response exists. The detail view holds it; the row only says that it arrived.
Closed
Finished, by either side. Not a synonym for Responded and not a failure.
No reviews yet
Nothing has been sent to you. Contacts is where a review starts.
Offline
Showing the last list received. New reviews will appear when the connection returns.
Not supported here
This computer's version does not offer reviews. Nothing is queued in the meantime.
Couldn't load reviews
The request failed. Retry, or open Contacts to start a new one.
Four distinct conditions, four distinct sentences. Unsupported is not an error and offline is not an empty list — collapsing them would hide the one the user can act on.
P3

Settings

Only the landing changes: one long scroll becomes a short page over five drill-downs. Nothing is removed.
05 · Settings landing
9:41

Settings

Panda · MacBook Pro
Online · 4 computers paired
Token usage
this month
Scheduled tasks
3 active
Categories
General
Dark · Default text size · Notifications on
Agent & session defaults
Claude · Default mode · Fast mode off
Connections & collaboration
4 computers · 2 shared folders · 3 collaborators
Security & approvals
Ask every time · Full control expires in 12h
Support & about
Help · Troubleshooting · Update available
Notes
Eight taps replace one long scroll: a computer summary, two utilities that were already destinations, and five categories.

Every summary is composed from live settings state. Token usage says this month rather than a number, because the figure belongs to the existing Usage screen and duplicating it here would create a second source of truth.

Two marks are earned, not decorative: the amber diamond because full control is currently active with an expiry, and the accent dot because an update exists. Both disappear when their condition is false.

No secret, token, fingerprint or credential is ever printed in a summary.
06 · Agent & session defaults · drill-down
9:41
Settings

Agent & session defaults

Used when you start a session without configuring it.
Agent Claude
Model follow computer
Effort Medium
Permission mode Default
Behaviour
Fast mode
Skips the plan step on short prompts.
Context window
Follows the computer's configured limit.
Overrides & filter
2 computers use their own defaults.
Some options depend on the computer
Agents and modes a computer does not report are hidden rather than shown greyed out. Model choices come from that computer's list.
Changing a default here never affects a running session.
Notes
The drill-down back row names its parent, so a category is never a place you get lost in.

Every control is the one that exists today — the same pickers, the same toggle, the same capability gates. This is a reorganisation of where they live, not a new settings model.

Model reads follow computer in monospace because the resolved value is a technical identifier from the daemon. No model name is written into the design.

The other four categories follow this template exactly: parent-named back, title, an optional sentence, then existing rows under written section labels.
Settings · five categories, and where each existing screen goes
Category
Contains · and what it still links out to
General
Appearance, text size, notifications, voice and input. Entirely local; nothing leaves this drill-down.
Agent & session defaults
Agent, model, effort, permission mode, fast mode, context window, overrides and filter — all capability-gated, all existing controls.
Connections & collaboration
Computers, shared folders, collaborators, reviews, bridges. Each row opens the existing full-screen surface unchanged, including Review Center.
Security & approvals
Approval behaviour, full-control expiry and the existing security controls. The expiry is real state, so it earns the mark on the landing row.
Support & about
Help and manual, troubleshooting, versions, about, and exit or unpair exactly where they already apply. Help content itself is untouched.
Behaviour preserved
Usage, Schedule, Shared Folders, Collaborators and Bridges keep their current screens
Review Center detail, new review, invite, join, fingerprint and remove-contact flows unchanged
Allow and deny semantics identical, including from the attention list
Every capability gate and every existing control preserved, moved not rewritten
No setting removed, renamed away or hidden behind a new gate
Every current back and dismiss path still lands where it does today
X

Collision proofs

The three layouts most likely to break: the header, the tab control and the machine row.
Dark · English
Review Center
2 waiting for your response
Inbox Sent Contacts
Panda · MacBook ProOnline
/Users/alex/code/cc-pocket
2
Light · English
Review Center
2 waiting for your response
Inbox Sent Contacts
Panda · MacBook ProOnline
/Users/alex/code/cc-pocket
2
Dark · 简体中文
审阅中心
2 项待你回复
收件箱 已发送 联系人
Panda · MacBook Pro在线
/Users/alex/code/cc-pocket
2
Fixed grammar localises; the computer name and the path stay literal. Tab labels shorten, so the chips have room to spare.
Dark · 200% type
Review Center
2 waiting for your response
Inbox Sent Contacts
Panda · MacBook Pro
Online
/Users/alex/code/cc-pocket
2
Tabs wrap to two lines, the status word drops below the name, targets grow to 56. Nothing shrinks and nothing is cut.
R

Recommended direction

Take all three surfaces on the shared header, and let the content differ

Back, large title, one factual summary line, then rows. The three destinations then feel like one product rather than three teams' work, and a user who has learnt one has learnt the others. The variation that matters — an attention strip, a tab control, a category list — sits below the header where it belongs.

Keep the pending-first split everywhere

Fleet attention and the Review inbox both divide into what needs a person and what is already settled, under written section labels. It is the same rule the approval work already follows, and it survives translation and large type without any layout cleverness.

Let real state earn every mark

A badge, a diamond or an accent dot appears only where the backend supplied the condition behind it — pending counts, an active full-control expiry, an available update. Everything else stays quiet, which is what makes the few marks readable.

Fixtures, not product facts

Every name, path, count, title, timestamp and version on this board is a fixture chosen to stress the layout: the four computers, the two pending requests, the five reviews, the three scheduled tasks, the 12-hour expiry. None asserts how the product behaves. The only real product vocabulary here is the five review states, the four connection states, the field names and the category contents.

Anti-drift checklist

01No protocol change. No new field, enum value or serialized state.
02No desktop change. Nothing here asks the daemon for anything new.
03No redesign of Share, Handoff, Archive, Workflow, Usage detail, Schedule detail or Help content.
04No new metric. No latency, health, score, streak, trend or completion percentage.
05No setting removed, and no review action removed — including allow, deny, invite, join, fingerprint and remove contact.
06No review status inferred. Delivery comes from the protocol, never from elapsed time.
07No secret in a summary — no token, fingerprint, key or credential on a settings row.
08No colour-only state, no fixed content-row height, no target under 44 pt, and no text shrunk to fit.
09No new global navigation, no gradient, no glass, no ornamental dashboard, no oversized card.
10Monospace only for paths, commands and technical identifiers. Never for prose or a status word.
Next step if this direction is approved

Expand into an interactive master the way the entry flow was: one device component, one state machine, every route live — Fleet switching computers, the attention list answering requests, three tabs, five categories and their drill-downs. The frames on this board are already the states that master has to hold.